<template>
    <view :style="{'height':windowHeight, 'width':windowWidth, 'background-color':'#f8f8f8'}">

        <scroll-view>
            <view>
                <view class="station-info-header">
                    <uni-row>
                        <uni-col :span="20">
                            <view class="row-height"> </view>
                        </uni-col>
                        <uni-col :span="4">
                            <view class="row-height" >
                                <uni-icons type="compose" color="#1989fa;" size="30" @click="navigateToUpdate()"></uni-icons>
                            </view>
                        </uni-col>
                    </uni-row>
                </view>
                <view>
                    <view v-for="info in stationInfos"
                          :key="info.field">
                        <uni-row>
                            <uni-col :span="22">
                                <uni-section v-bind:title="info.field" type="line"></uni-section>
                            </uni-col>
                            <uni-col :span="2">
                                <view class="row-height" ></view>
                            </uni-col>
                        </uni-row>
                        <uni-row>
                            <uni-col :span="24">
                                <view v-if="info.type === 'text'">
                                    <uni-list>
                                        <uni-list-item v-bind:title="info.values" ></uni-list-item>
                                    </uni-list>
                                </view>
                                <view v-if="info.type === 'radio'">
                                    <uni-list>
                                        <uni-list-item v-if="info.referencesValues[info.values] !== undefined"  v-bind:title="info.referencesValues[info.values]" ></uni-list-item>
                                        <uni-list-item v-if="info.referencesValues[info.values] === undefined" v-bind:title="info.values" ></uni-list-item>
                                    </uni-list>
                                </view>
                                <view v-if="info.type === 'text_list'">
                                    <uni-list>
                                        <view v-for="value in info.values">
                                            <uni-list-item v-bind:title="value.text" ></uni-list-item>
                                        </view>
                                    </uni-list>
                                </view>
                            </uni-col>
                        </uni-row>
                    </view>
                </view>
            </view>
            <view class="station-info-footer"></view>
        </scroll-view>

    </view>
</template>

<script>
    export default {
        name: "StationInfo",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                stationInfos: [],
                stationCode: ''
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight
            this.stationCode = options.stationCode
            this.fetchStationInfos(options.stationCode)
        },
        methods: {

            fetchStationInfos(stationCode) {
                uni.showLoading()
                this.uniRequest({
                    url: '/stations/' + stationCode,
                    methods: 'GET'
                }).then((res) => {
                    console.log('获取台站信息：', res)
                    this.stationInfos = res.data
                    uni.hideLoading()
                }).catch((err) => {
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '台站信息获取失败！ ',
                        duration: 2000
                    })
                    return;
                })
            },
            navigateToUpdate: function() {
                const updateUrl = '/pages/station/StationInfoUpdate?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&stationCode=' + this.stationCode
                uni.navigateTo({
                    url: updateUrl,
                })
            }
        }
    }
</script>

<style scoped>

    .station-info-header {
        height: 2rem;
    }

    .station-info-footer {
        height: 2rem;
    }

    .row-height {
        height: 3rem;
    }


</style>